<template>
  <div class="dashboard">
    <header class="dashboard-header">
      <div class="header-left">
        <h1>数据统计分析仪表盘</h1>
        <div class="date">{{ currentDate }}</div>
      </div>
      <div class="header-right">
        <div class="user-info" v-if="data.huoyue && data.huoyue.length > 0">
          <div class="avatar">\
            <span>{{ data.huoyue[0].F0602.charAt(0) }}</span>
          </div>
        </div>
      </div>
    </header>

    <div class="summary-cards">
      <div class="card">
        <div class="card-content">
          <h3>知识库总数</h3>
          <div class="card-value">{{ data.countKnowlwdge }}</div>
        </div>
        <div class="card-icon knowledge-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
          </svg>
        </div>
      </div>

      <div class="card">
        <div class="card-content">
          <h3>人员总数</h3>
          <div class="card-value">{{ data.countPerson }}</div>
        </div>
        <div class="card-icon person-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </div>
      </div>

      <div class="card">
        <div class="card-content">
          <h3>盈利额</h3>
          <div class="card-value">{{ data.countCompany }}</div>
        </div>
        <div class="card-icon dept-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
            <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
          </svg>
        </div>
      </div>

      <div class="card">
        <div class="card-content">
          <h3>消耗总token数</h3>
          <div class="card-value">{{ totalSum }}</div>
        </div>
        <div class="card-icon sum-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="12" y1="1" x2="12" y2="23"></line>
            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="card-content">
          <h3>剩余token数</h3>
          <div class="card-value">{{ data.countToken }}</div>
        </div>
        <div class="card-icon remaining-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="chart-section">
        <div class="chart-card">
          <h2>每日数据统计</h2>
          <div class="chart-filters">
            <div class="filter-item">
              <label>图表类型:</label>
              <select v-model="chartType" @change="updateChart">
                <option value="bar">柱状图</option>
                <option value="line">折线图</option>
                <option value="combo">组合图</option>
              </select>
            </div>
          </div>
          <div id="companyChart" class="chart"></div>
        </div>
      </div>

      <div class="user-section" v-if="data.huoyue && data.huoyue.length > 0">
        <h2>活跃用户信息</h2>
        <div class="user-card" v-for="item in data.huoyue" :key="item.F0601">
          <div class="user-details">
            <div class="user-avatar">
              <img style="width: 100%; height: 100%;" :src="item.F0616" :alt="item.F0602">
            </div>
            <div class="user-info-details">
              <h3>{{ item.F0602 }}</h3>
              <p><strong>部门:</strong> {{ item.F0617 }}</p>
              <p><strong>电话:</strong> {{ item.F0604 }}</p>
              <p><strong>注册日期:</strong> {{ formatDate(item.F0615) }}</p>
              <p><strong>消耗token数:</strong> {{ item.F0605 }}</p>
            </div>
          </div>
          <div class="user-stats">
            <div class="stat-item">
              <div class="stat-value">{{ item.total_tokens }}</div>
              <div class="stat-label">总Token</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ item.F0611 }}</div>
              <div class="stat-label">剩余token数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ item.F0610 === 1 ? '在职' : '离职' }}</div>
              <div class="stat-label">状态</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfo } from '@/api/company-index/index'
import * as echarts from "echarts"
export default {
  name: 'CompanyIndex',
  data() {
    return {
      currentDate: new Date().toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "long",
        day: "numeric",
      }),
      data: {
        countKnowlwdge: 24,
        totalCompany: [
          {
            usedate: "2025-04-22",
            deptName: "",
            selectTotal: 0,
            selectSum: 0,
            department: "",
          },
          {
            usedate: "2025-04-21",
            deptName: "小丑",
            selectTotal: 1,
            selectSum: 54,
            department: "2004",
          },
          {
            usedate: "2025-04-20",
            deptName: "小丑",
            selectTotal: 1,
            selectSum: 65,
            department: "2004",
          },
          {
            usedate: "2025-04-19",
            deptName: "",
            selectTotal: 0,
            selectSum: 0,
            department: "",
          },
          {
            usedate: "2025-04-18",
            deptName: "",
            selectTotal: 0,
            selectSum: 0,
            department: "",
          },
          {
            usedate: "2025-04-17",
            deptName: "小丑",
            selectTotal: 1,
            selectSum: 258,
            department: "2004",
          },
          {
            usedate: "2025-04-16",
            deptName: "",
            selectTotal: 0,
            selectSum: 0,
            department: "",
          },
        ],
        countPerson: 1,
        huoyue: [
          {
            F0605: 1489,
            F0616: "GVdUhHN25R229d51cd2b3d649ee245cdac75f2fac624.png",
            F0604: "17382247096",
            F0615: "2025-04-16",
            F0606: 20.0,
            F0617: "小丑",
            F0608: "$2a$10$2iEkFhdPIOKO0yC6rg8bxe50TbvrMYb.kivafwguEjnnHjWj/Sdby",
            openid: "o1MOL7aLZFvDFxo4LXm3OhyGf60k",
            total_tokens: 377,
            F0610: 1,
            F0301: 332,
            F0601: 349,
            F0612: 0,
            F0501: 2004,
            F0611: 1040,
            F0603: "WeiXinUSer76",
            F0614: "b565d080-5f3b-46ae-a1bb-d37d89f0d3d0",
            F0602: "哦豁",
          },
        ],
        countDept: 3,
      },
      chartType: "combo",
      companyChart: null,
    }
  },
  computed: {
    totalSum() {
      return this.data.totalCompany.reduce((sum, item) => sum + item.selectSum, 0)
    },
    processedCompanyData() {
      // 按日期排序（从早到晚）
      return [...this.data.totalCompany].sort((a, b) => new Date(a.usedate) - new Date(b.usedate))
    },
    remainingTokens() {
      return this.data.huoyue && this.data.huoyue.length > 0
        ? this.data.huoyue[0].F0611
        : 0;
    },
  },
  mounted() {
    this.initChart()

    // 响应式调整图表大小
    window.addEventListener("resize", () => {
      if (this.companyChart) {
        this.companyChart.resize()
      }
    })
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      getInfo().then(res => {
        this.data = res.data
        res.data.huoyue.forEach(item => {
          item.F0616 = 'https://file.peacezhwd.cn/buck1/' + item.F0616
        })
        this.updateChart()
      })
    },
    formatDate(dateString) {
      if (!dateString) return ""
      const date = new Date(dateString)
      return date.toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "long",
        day: "numeric",
      })
    },

    initChart() {
      const chartDom = document.getElementById("companyChart")
      this.companyChart = echarts.init(chartDom)
      this.updateChart()
    },

    updateChart() {
      if (!this.companyChart) return

      const dates = this.processedCompanyData.map((item) => {
        const date = new Date(item.usedate)
        return `${date.getMonth() + 1}/${date.getDate()}`
      })

      const selectTotalData = this.processedCompanyData.map((item) => item.selectTotal)
      const selectSumData = this.processedCompanyData.map((item) => item.selectSum)
      const deptNames = this.processedCompanyData.map((item) => item.deptName || "未知")

      let series = []

      if (this.chartType === "bar") {
        series = [
          {
            name: "查询次数",
            type: "bar",
            data: selectTotalData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4f46e5" },
                { offset: 1, color: "#7c3aed" },
              ]),
            },
            barWidth: "20%",
            barGap: "30%",
          },
          {
            name: "查询消耗token数",
            type: "bar",
            data: selectSumData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#3b82f6" },
                { offset: 1, color: "#8b5cf6" },
              ]),
            },
            barWidth: "20%",
          },
        ]
      } else if (this.chartType === "line") {
        series = [
          {
            name: "查询次数",
            type: "line",
            data: selectTotalData,
            smooth: true,
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              color: "#4f46e5",
            },
            lineStyle: {
              width: 3,
            },
          },
          {
            name: "查询消耗token数",
            type: "line",
            data: selectSumData,
            smooth: true,
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              color: "#8b5cf6",
            },
            lineStyle: {
              width: 3,
            },
          },
        ]
      } else if (this.chartType === "combo") {
        series = [
          {
            name: "查询次数",
            type: "bar",
            data: selectTotalData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4f46e5" },
                { offset: 1, color: "#7c3aed" },
              ]),
            },
            barWidth: "20%",
          },
          {
            name: "查询消耗token数",
            type: "line",
            data: selectSumData,
            smooth: true,
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              color: "#f59e0b",
            },
            lineStyle: {
              width: 3,
              color: "#f59e0b",
            },
            yAxisIndex: 1,
          },
        ]
      }

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) => {
            const date = params[0].axisValue
            const index = params[0].dataIndex
            const deptName = deptNames[index] || "未知"

            let result = `<div style="font-weight:bold;margin-bottom:5px;">${date} (${deptName})</div>`

            params.forEach((param) => {
              const color = param.color
              const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`
              result += `${marker}${param.seriesName}: ${param.value}<br/>`
            })

            return result
          },
        },
        legend: {
          data: ["查询次数", "查询消耗token数"],
          bottom: 0,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          top: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: dates,
          axisLine: {
            lineStyle: {
              color: "#ddd",
            },
          },
          axisLabel: {
            color: "#666",
            fontSize: 12,
          },
        },
        yAxis: [
          {
            type: "value",
            name: "查询次数",
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#4f46e5",
              },
            },
            axisLabel: {
              color: "#666",
              fontSize: 12,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#eee",
              },
            },
          },
          {
            type: "value",
            name: "查询消耗token数",
            position: "right",
            axisLine: {
              lineStyle: {
                color: this.chartType === "combo" ? "#f59e0b" : "#8b5cf6",
              },
            },
            axisLabel: {
              color: "#666",
              fontSize: 12,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: series,
      }

      this.companyChart.setOption(option)
    },
  },
}
</script>

<style scoped>
:root {
  --primary-color: #4f46e5;
  --secondary-color: #7c3aed;
  --accent-color: #8b5cf6;
  --background-color: #f9fafb;
  --card-background: #ffffff;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --success-color: #10b981;
  --info-color: #3b82f6;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;

  --knowledge-color: #8b5cf6;
  --person-color: #3b82f6;
  --dept-color: #10b981;
  --sum-color: #f59e0b;
  --remaining-color: #0ea5e9;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Nunito", sans-serif;
  background-color: var(--background-color);
  color: var(--text-primary);
  line-height: 1.6;
}

.dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.header-left h1 {
  font-size: 1.8rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.date {
  font-size: 1rem;
  color: var(--text-secondary);
}

.header-right .user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
}

.user-name {
  font-weight: 600;
  color: var(--text-primary);
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.card {
  background-color: var(--card-background);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.card-content h3 {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.card-value {
  font-size: 1.8rem;
  font-weight: 700;
}

.card-icon {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.knowledge-icon {
  background-color: rgba(139, 92, 246, 0.1);
  color: var(--knowledge-color);
}

.person-icon {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--person-color);
}

.dept-icon {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--dept-color);
}

.sum-icon {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--sum-color);
}

.remaining-icon {
  background-color: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
}

.main-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

.chart-card,
.user-card {
  background-color: var(--card-background);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  height: 50%;
}

.chart-card h2,
.user-card h2 {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.chart {
  height: 400px;
  width: 100%;
}

.chart-filters {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-item label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.filter-item select {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: white;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.user-details {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.user-avatar {
  width: 100px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 2rem;
}

.user-info-details h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.user-info-details p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.user-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

@media (max-width: 992px) {
  .main-content {
    grid-template-columns: 1fr;
  }

  .chart {
    height: 350px;
  }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 1rem;
  }

  .summary-cards {
    grid-template-columns: 1fr 1fr;
  }

  .user-details {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .user-info-details {
    text-align: center;
  }
}

@media (max-width: 576px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .summary-cards {
    grid-template-columns: 1fr;
  }

  .user-stats {
    grid-template-columns: 1fr;
  }
}
</style>
